<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test for Soundcloud:File Upload Progress</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
if( !window.XMLHttpRequest ) XMLHttpRequest = function()
     {
        try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0") }catch(e){}
        try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0") }catch(e){}
        try{ return new ActiveXObject("Msxml2.XMLHTTP") }catch(e){}
        try{ return new ActiveXObject("Microsoft.XMLHTTP") }catch(e){}
        throw new Error("Could not find an XMLHttpRequest alternative.")
     };
interval = null;

function openProgressBar() {
	/* prevent resubmit */
	document.forms['upload'].submit.disabled= true;
	/* reset progress bar */
        bar = document.getElementById('progressbar');
        bar.style.width = '0px';
	file_selected = document.getElementById('media_file').value;
	if (file_selected == ''){
		alert('Must select file before upload');
		return false;
	}
        /* generate random progress-id */
        uuid = "";
        for (i = 0; i < 32; i++) {
                uuid += Math.floor(Math.random() * 16).toString(16);
        }
        /* patch the form-action tag to include the progress-id */
        document.getElementById("upload").action="/uload?X-Progress-ID=" + uuid;

        /* call the progress-updater every 1000ms */
        interval = window.setInterval( function () {  fetch(uuid);  }, 1000 );
}

function fetch(uuid) {
        req = new XMLHttpRequest();
        var bar_updated = false;
        req.open("GET", "/progress", 1);
        req.setRequestHeader("X-Progress-ID", uuid);
        req.onreadystatechange = function () {
                if (req.readyState == 4) {
                        if (req.status == 200) {
                                var upload = eval(req.responseText);

                                document.getElementById('response').innerHTML = upload.state;

                                /* change the width if the inner progress-bar */
                                if (upload.state == 'done' || upload.state == 'uploading') {
                                        bar = document.getElementById('progressbar');
                                        w = 400 * upload.received / upload.size;
                                        bar.style.width = w + 'px';
                                        if (upload.stats == 'uploading'){
                                                bar_updated = true;
                                        }
                                }
                                /* we are done, stop the interval */
                                if (upload.state == 'done') {
                                        window.clearTimeout(interval);
                                        if (bar_updated == false){
                                                bar = document.getElementById('progressbar');
                                                bar.style.width = 400 + 'px';
                                        }
                                        sendTitle();
                                }
				if (upload.state == 'error' && upload.status == '413'){
                                        window.clearTimeout(interval);
					document.getElementById('response').innerHTML = 'Exceeded max upload size';
					/* enable form submit */
					document.forms['upload'].submit.disabled= false;
					/* reset upload stream */
					document.getElementById('uploadframe').src='about:blank';
				}
				else if (upload.state == 'error' && parseInt(upload.status) > 420 ){
                                        window.clearTimeout(interval);
					document.getElementById('response').innerHTML = 'Upload canceled';
					/* enable form submit */
					document.forms['upload'].submit.disabled= false;
					/* reset upload stream */
					document.getElementById('uploadframe').src='about:blank';
				}
				else if (upload.state == 'error'){
                                        window.clearTimeout(interval);
					document.getElementById('response').innerHTML = 'Unhandled error:'+upload.status;
					/* enable form submit */
					document.forms['upload'].submit.disabled= false;
					/* reset upload stream */
					document.getElementById('uploadframe').src='about:blank';
				}
				
                        }
                }
        }
        req.send(null);
}
function sendTitle(){
                req = new XMLHttpRequest();
                title=document.getElementById('title').value;
                params = "title="+title;
		params += "&X-Progress-ID="+uuid;
                req.open("GET", "/send_text?"+params, 0);
                req.setRequestHeader("Content-length", params.length);
		req.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");

                req.send(null);
                document.getElementById('response').innerHTML=req.responseText;
		/* enable form submit */
		document.forms['upload'].submit.disabled= false;
}
</script>
</head>

<body>  
<div style="border:1px solid #fff;width:498px;margin:0 auto;padding:30px">
<form id="upload"  name="upload" enctype="multipart/form-data" action="/uload" method="post"  target="uploadframe" onsubmit="try{this.disabled = true; openProgressBar(); return true;}catch(e){alert(e);}">
<div style="display: block" >
	<div style="margin-bottom: 20px"><label for="title"><input id="title" name="title" type="text" size="45px" /></label></div>
	<div style="margin-bottom: 30px"><input id="media_file" name="media_file" type="file"/></div>
	<div><input type="submit" name="submit" value="Upload"/></div>
</div>
</form>

<iframe id="uploadframe" name="uploadframe" width="0" height="0" frameborder="0" border="0" src="about:blank"></iframe>

<div id="uploading">
<div id="progress" style="width: 400px; border: 1px solid black" >
<div id="progressbar" style="width: 1px; background-color: black; border: 1px solid white">&nbsp;</div>
</div>
</div>
<div id="percents"></div>
<div id="response"></div>
</div>
</body>
</html>

